<template>
	<div>
		<div class="mb16">
			<button class="gjsx" @click="toggleSelection">高级筛选 <img src="../img/高级筛选.png"
					style="height: 15px;" /></button>
			<div class="ml1">
				<el-input v-model="inputValue" type="text" maxlength="20" placeholder="工单号/工单内容" class="el-input" />
				<el-button type="primary" style="height: 40px; background-color: white;color: black; border: none;"
					@click="sousuo">搜索</el-button>
			</div>
		</div>
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="全部" name="one">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<form>
							<el-form-item label="工单状态" class="gdzt">
								<el-select v-model="form.state" clearable placeholder="选择工单状态" style="width: 200px">
									<el-option v-for="item in options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="执行人"  style="margin-left: 335px;margin-top: -50px;">
								<el-select v-model="gongdanexecutor" multiple placeholder="选择执行人(可多选)"
									style="width: 240px;">
									<el-option v-for="item in zxroptions.user_name" :key="item.user_name"
										:label="item.user_name" :value="item.user_name" />
								</el-select>
							</el-form-item>
							<el-form-item label="最近更新时间" style="margin-left:665px;margin-top: -50px;" class="zjgxsj">
								<el-date-picker v-model="form.zjgx_time" value-format="YYYY-MM-DD" type="month"
									placeholder="选择月份" />
							</el-form-item>
							<div class="czcx">
								<el-button class="btn1" @click="ChongZhi">重置</el-button>
								<el-button class="btn2" @click="ChaXun">查询</el-button>
							</div>
						</form>
					</div>
				</div>
				<div class="GongDanList">
					<!-- 列表-->
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="orderdata.QuanOrderWork" style="width: 100%">
							<el-table-column fixed="left" type="selection" width="55" />
							<el-table-column label="分类" prop="order_name" width="80" align="center" />
							<el-table-column label="工单号" prop="order_hao" width="120" align="center" />
							<el-table-column label="创建时间" prop="chuang_time" width="160" align="center" />
							<el-table-column label="起止时间" prop="qz_time" width="280" align="center" />
							<el-table-column label="状态" prop="state" width="80" align="center" />
							<el-table-column label="执行人" prop="executor" width="120" align="center" />
							<el-table-column prop="zjgx_time" label="最近更新时间" width="180" />
							<el-table-column prop="adress" label="地址" width="120" />
							<el-table-column prop="reviewer" v-if="false" label="审核人" width="120" />
							<el-table-column prop="sh_time" label="审核时间" width="180" />
							<el-table-column prop="shyy" label="审核原因" width="120" />
							<el-table-column fixed="right" label="工作内容" prop="ordernr" show-overflow-tooltip
								align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<template #default="scope">
									<el-button link type="primary" size="small"
										@click="orderdetail(scope.row.order_hao)">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- 分页-->
					<div class="demo-pagination-block">
						<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
							:page-sizes="[20, 30, 40, 50]" :size="size" :disabled="disabled" :background="background"
							layout="total, sizes, prev, pager, next, jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</el-tab-pane>
			<!-- <el-tab-pane label="待审核" name="two">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<DaiShenHeGDSXVue></DaiShenHeGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection" width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span>{{ row.endTime }}</span>&nbsp;&nbsp;
									<el-tag type="success">待审核</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="待处理" name="three">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<ShenHeZGDSXVue></ShenHeZGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection" width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span>{{ row.endTime }}</span>&nbsp;&nbsp;
									<el-tag type="success">待处理</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="120" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column prop="" label="审核原因" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="处理中" name="four">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<ShenHeZGDSXVue></ShenHeZGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection" width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span>{{ row.endTime }}</span>&nbsp;&nbsp;
									<el-tag type="success">处理中</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="120" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column prop="" label="审核原因" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="已完成" name="five">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<WanChengGDSXVue></WanChengGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection" width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span>{{ row.endTime }}</span>&nbsp;&nbsp;
									<el-tag type="success">完成</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="120" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column prop="" label="审核原因" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="已作废" name="six">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<WanChengGDSXVue></WanChengGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection" width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span>{{ row.endTime }}</span>&nbsp;&nbsp;
									<el-tag type="success">完成</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column  label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="120" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column prop="" label="审核原因" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane> -->
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { useRouter } from 'vue-router';
	import $http from '../router/AxiosApi';
	import SuoYouGDSXVue from './SuoYouGDSX.vue';
	import DaiShenHeGDSXVue from './DaiShenHeGDSX.vue';
	import ShenHeZGDSXVue from './ShenHeZGDSX.vue';
	import WanChengGDSXVue from './WanChengGDSX.vue';
	import type { ComponentSize } from 'element-plus'
	import type { TabsPaneContext } from 'element-plus'
	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}
	const activeName = ref('one')

	const page = ref(1)
	const pageSize = ref(12)
	const total = ref(0)
	const size = ref<ComponentSize>('default')
	const currentPage4 = ref(1)
	const pageSize4 = ref(12)
	const background = ref(false)
	const disabled = ref(false)
	// 使用ref来创建一个响应式的数据
	const isSelectionVisible = ref(false);

	// 定义一个方法来切换isSelectionVisible的值  
	function toggleSelection() {
		isSelectionVisible.value = !isSelectionVisible.value;
	}

	const handleSizeChange = (val : number) => {
		pageSize.value = val;
		aa(page, pageSize, form.orderlx_id, form.state, gongdanexecutor, form.ordernr, form.order_hao, form.zjgx_time)
	}
	const handleCurrentChange = (val : number) => {
		page.value = val;
		aa(page, pageSize, form.orderlx_id, form.state, gongdanexecutor, form.ordernr, form.order_hao, form.zjgx_time)
	}
	const orderdata = reactive({
		QuanOrderWork: []
	});
	const form = reactive({
		order_id: '',
		order_hao: '',
		chuang_time: '',
		qz_time: '',
		state: '',
		executor: '',
		order_label: '',
		zjgx_time: '',
		adress: '',
		reviewer: '',
		sh_time: '',
		shyy: '',
		wc_time: '',
		ordernr: '',
		order_name: '',
		orderlx_id: '',
	})
	const gongdanexecutor = ref([])
	const aa = (userpage, size, orderlxId, State, xzzxr, order_nr, orderHao, chayue) => {
		xzzxr = gongdanexecutor.value.map(name => name).join(', ')
		$http.post(`OrderWorkList?currentPage=${page.value}&pageSize=${size.value}`, {
			orderlx_id: orderlxId,
			state: State,
			executor: xzzxr,
			ordernr: order_nr,
			order_hao: orderHao,
			order_name: '住户报修',
			zjgx_time: chayue
		}).then((res) => {
			orderdata.QuanOrderWork = res.data.data.list
			console.log("工单:", res.data.data)
			total.value = res.data.data.total
			currentPage4.value = res.data.data.pageNum
			pageSize4.value = res.data.data.pageSize
		})
	}
	aa(page, pageSize, form.orderlx_id, form.state, gongdanexecutor, form.ordernr, form.order_hao, form.zjgx_time)

	const router = useRouter()
	const orderdetail = (orderHao) => {
		console.log("OrderId:", orderHao);
		// 假设你使用了 Vue Router，可以这样跳转到详情页并传递参数
		router.push({ path: "GongDanDetail", query: { orderHao } });
	}
	const inputValue = ref('');
	const gdlxoptions = reactive(
		{ order_name: [] }
	)
	$http.post("OrderLX").then((res) => {
		gdlxoptions.order_name = res.data.data
	})
	const value = ref('')
	const options = [
		{ value: '待审核', label: '待审核' },
		{ value: '待处理', label: '待处理' },
		{ value: '处理中', label: '处理中' },
		{ value: '已闭单', label: '已闭单' },
		{ value: '已作废', label: '已作废' },
	]
	const zxrvalue = ref([])
	const zxroptions = reactive(
		{ user_name: [] }
	)
	$http.post("ZhiXingRen").then((res) => {
		zxroptions.user_name = res.data.data
	})

	const ChaXun = () => {
		aa(page, pageSize, form.orderlx_id, form.state, gongdanexecutor, form.ordernr, form.order_hao, form.zjgx_time)
	}
	const sousuo = () => {
		// 先将 inputValue.value 的值赋给 form.order_hao 和 form.ordernr
		form.order_hao = inputValue.value;
		form.ordernr = inputValue.value;
		aa(page, pageSize, form.orderlx_id, form.state, gongdanexecutor, form.ordernr, form.order_hao, form.zjgx_time)
	}
	const ChongZhi = () => {

	}
</script>

<style scoped>
	.GongDanList {
		border-radius: 10px;
		background-color: white;
	}

	.GongDanLB {
		margin-top: 10px;
		width: 100%;
	}

	.ShaiXuan {
		width: 1200x;
		border-radius: 10px;
		background-color: white;
		margin-bottom: 10px;
		padding-bottom: 20px;
	}

	.ShaiXuanFrom {
		padding-top: 25px;
		padding-left: 30px;
	}

	.gjsx {
		background-color: white;
		padding: 10px 15px;
	}

	.mb16 {
		float: right;
		width: 500px;
		margin-bottom: -38px;
		/* 增加下方间距 */
		margin-top: -8px;
		/* 减少上方间距 */
		display: flex;
		justify-content: flex-end;
		position: relative;
		z-index: 999;
	}

	.ml1 {
		width: 300px;
		border: none;
		margin-left: 10px;
		display: inline-table;

	}

	.el-input {
		width: 240px;
		height: 40px;
		line-height: 40px;
		border: none;
	}

	.demo-pagination-block {
		padding: 20px;
	}

	.gdbq {
		margin-left: 700px;
		margin-top: -50px;
	}

	.gdzt {}

	.gdsjzt {
		margin-left: 968px;
		margin-top: -50px;
	}

	.zjgxsj {}

	.cjsj {
		width: 470px;
	}

	.wcsj {
		width: 470px;
		margin-left: 695px;
		margin-top: -50px;
	}

	.shsj {
		width: 500px;
		margin-left: 665px;
		margin-top: -50px;
	}

	.btn1 {
		width: 90px;
		height: 35px;
	}

	.btn2 {
		background-color: #00C36D;
		color: white;
		margin-left: 20px;
		width: 90px;
		height: 35px;
	}

	.czcx {
		width: 200px;
	}
</style>